html, body, * {
    margin: 0px;
    padding: 0px;
}
body {
  color: #325050;
  background: #fff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 62.5%;
}
h1 {
    font-size: 3.8em;
    letter-spacing: .1em;
    font-family: 'Julius Sans One', sans-serif;
}

h2 {
    font-style: italic;
    font-size: 2em;
    color: rgba(255,255,255,0.6);
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #607476;
    font-size: 1.4em;
}
.cf:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.header-title {
    position: relative;
    width: 100%;
    height: 230px;
    color: white;
    background: #2d6360 50% 0 url(./../image/header-bg.jpg) no-repeat;
    background-attachment: fixed, fixed, fixed, scroll;
    background-position: 0 0, 0 0 -5px -25px, 0 50%;
    background-size: auto, auto, auto, cover;
    border-top: 10px solid black;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
}

.header-title h1, .header-title h2 {
    margin: 10px;
    padding: 0 15%;
}
.header-title h1 {
    margin-top: 6%;
}
.zen-content-second {
    background-attachment: scroll, scroll, fixed;
    background-color: rgba(138,188,159,0.5);
    background-image: url(./../image/contours-opaque.png), url(./../image/gridlines-opaque.png), url(./../image/bamboo.png);
}
.content {
    padding: 4em 0;
    width: 100%;
    font-size: 1.4em;
    line-height: 30px;
}
.content p, .content h3 {
    margin: 0 5% 1em 13%;
}
.design-name, .designer-name {
    display: block;
}
aside li {
    display: inline-block;
    padding: 2em 0 2em 4em;
}

@media only screen and (min-width: 1132px) {
    body {
        background: #ffffff;
        background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#e5ede8), color-stop(100%,#e5ede8));
        background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
        background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
        background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
        background: linear-gradient(to right,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
        font-size: 100%;
    }
    .header-title {
        height: 310px;
    }
    .content-article {
        width: 66%;
    }
    .about-design {
        width: 34%;
        padding-top: 4em;
        position: absolute;
        top: 320px;
        right: 0;
    }
    aside li {
        display: block;
    }    
    .about-css {
        position: absolute;
        padding-top: 4em;
        width: 34%;
        right: 0;
        top: 1550px;
    }
    .about-design li {
        margin: 0;
    }
    .about-css li {
        margin: 0 auto;
        padding: 2em 0 2em 0;
        width: 70%;
        text-align: left;
        border-bottom: solid 1px #a0b9ad;
    }
}

@media only screen and (min-width: 500px) and (max-width: 1131px) {
    .content {
        font-size: 1.8em;
    }
    aside {
        font-size: 1.2em;
        background: #edf4f0;
    }
    .about-css li, .about-design li {
        float: left;
        padding: 1.5em 0 1.5em 10%;
        width: 39%;
        text-align: left;
        border-top: solid 1px #d9e3dc;
    }
    .about-css li:nth-child(4) {
        border-bottom: solid 1px #a0b9ad;
    }
    .about-css li {
        border-top: solid 1px #a0b9ad;
    }
    .about-css {
        background-color: rgba(138,188,159,0.5);
        background-image: url(./../image/bamboo.png);
    }
}